<template>
	<view class="bg"></view>
	<view class="" :style="{height: menuTopHeight + 'px'}"></view>
	<view class="menu-box" :style="{height: menuHeight + 'px'}">
		<u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
		<view class="navigate-title">会员充值</view>
	</view>

	<view class="container">
		<!-- 金额详情卡片 -->
		<view class="card-box">
			<view class="vip-icon">
				<u-image width="326rpx" height="239rpx" src="/static/images/vip.png"></u-image>
			</view>
			<view class="avatar-box">
				<view class="left">
					<u-avatar src="/static/image/avatar.png" size="100rpx"></u-avatar>
					<view class="user-info">
						<view class="nickname">听说蛋糕不好吃</view>
						<view class="mobile">151****1668</view>
					</view>
				</view>
				<view class="right" @tap="goRecord">
					<text>交易明细</text>
					<u-icon name="arrow-right" color="#97B3FF" size="12"></u-icon>
				</view>
			</view>
			<view class="context-box">
				<view class="message">剩余金额</view>
				<view class="price-wrap">
					<view class="price-box">
						<text>1602.20</text>
						<text class="yuan">元</text>
					</view>
					<view class="tip">会员权益</view>
				</view>
			</view>

			<view class="icon-list">
				<u-grid :border="false" col="4">
					<u-grid-item>
						<view class="item">
							<u-image width="88rpx" height="88rpx" src="/static/images/a54.png"></u-image>
							<view class="name">门店消费</view>
							<view class="sub-name">可在线下消费</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item">
							<u-image width="88rpx" height="88rpx" src="/static/images/a54.png"></u-image>
							<view class="name">会员权益</view>
							<view class="sub-name">享会员权益</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item">
							<u-image width="88rpx" height="88rpx" src="/static/images/a54.png"></u-image>
							<view class="name">礼品券</view>
							<view class="sub-name">消费有礼品</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item">
							<u-image width="88rpx" height="88rpx" src="/static/images/a54.png"></u-image>
							<view class="name">专属优惠</view>
							<view class="sub-name">门店可用</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
		<!-- 充值套餐 -->
		<view class="recharge-card">
			<view class="title-box">
				<view class="title">充值套餐</view>
				<view class="tip">多充多得</view>
			</view>
			<view class="recharge-list">
				<u-grid :border="false" col="3" @click="rechargeChange">
					<u-grid-item v-for="(item, i) in rechargeList" :key="i">
						<view :class="['item', current == i ? 'active' : '']">
							<view class="name">充值金额</view>
							<view class="price-box">
								<text class="yuan">￥</text>
								<text>{{item.price}}</text>
							</view>
							<view class="send-price">赠{{item.send}}元</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		
		
		<u-checkbox-group v-model="agree" placement="column">
			<view class="agreement-box">
				<u-checkbox name="agreeCheck" shape="circle" v-model:checked="agree[0]"></u-checkbox>
				<view class="context">
					<text>已阅读并同意</text>
					<text class="color" @tap="goAgreement(1)">《会员服务协议》</text>
					<text>和</text>
					<text class="color" @tap="goAgreement(2)">《会员充值协议》</text>
				</view>
			</view>
		</u-checkbox-group>
		
		<!-- 充值按钮 -->
		<view class="recharge-btn" @tap="goSuccess">
			<u-image width="100%" height="100rpx" src="/static/images/b6.png"></u-image>
			<view class="btn">
				<view class="left">
					<text class="one">￥</text>
					<text class="two">1000 </text>
					<text class="three">充值金额</text>
				</view>
				<view class="right">立即充值</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useHeight
	} from '@/hooks/useMenuHeight'
	const {
		menuHeight,
		menuTopHeight
	} = useHeight()
	
	// 充值套餐数据
	const rechargeList = ref([
		{ price: 1980, id: 0, send: 150 },
		{ price: 3980, id: 1, send: 450 },
		{ price: 5980, id: 2, send: 600 },
		{ price: 9980, id: 3, send: 800 },
		{ price: 19800, id: 4, send: 2000 },
		{ price: 50000, id: 5, send: 6000 },
	])
	const current = ref(0)
	const rechargeChange = (e) => {
		current.value = e
	}
	
	const agree = ref([])
	// 用户协议和隐私政策 1用户 2隐私
	const goAgreement = (e) => {
		uni.navigateTo({
			url: `/mine/agreement/agreement?status=${e}`
		})
	}

	const goRecord = () => {
		uni.navigateTo({
			url: `/mine/vip/record`
		})
	}
	const goBack = () => {
		uni.navigateBack()
	}
	const goSuccess = () => {
		uni.navigateTo({
			url: '/mine/reservation/success?status=vip'
		})
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 483rpx;
		background: linear-gradient(180deg, #3165DE 0%, #3165DE 31%, rgba(255, 255, 255, 0.52) 100%);
		border-radius: 0rpx 0rpx 80rpx 80rpx;
		z-index: -1;
	}

	.menu-box {
		padding-left: 26rpx;
		color: #fff;
		display: flex;
		align-items: center;

		.navigate-title {
			color: #fff;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-left: 18rpx;
		}
	}

	.container {
		padding: 52rpx 26rpx;
	}

	.card-box {
		position: relative;
		padding: 15rpx;
		background: #3B3B3B;
		border-radius: 20rpx;
		.vip-icon {
			position: absolute;
			right: 8rpx;
			top: 95rpx;
		}

		.avatar-box {
			padding: 22rpx 19rpx 0;
			@include between(100%);

			.left {
				@include start();

				.user-info {
					margin-left: 20rpx;
					color: #D5E0FF;

					.nickname {
						font-size: 30rpx;
						margin-bottom: 12rpx;
					}

					.mobile {
						font-size: 24rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				&>text {
					font-size: 24rpx;
					color: #D5E0FF;
					margin-right: 8rpx;
				}
			}
		}

		.context-box {
			position: relative;
			z-index: 9;
			margin: 39rpx 19rpx 33rpx;
			color: #D5E0FF;

			.message {
				font-size: 24rpx;
				margin-bottom: 14rpx;
			}

			.price-wrap {
				@include between(100%);

				.price-box {
					font-size: 40rpx;

					.yuan {
						font-size: 26rpx;
					}
				}

				.tip {
					font-size: 24rpx;
					margin-right: 50rpx;
				}
			}
		}
		
		.icon-list {
			position: relative;
			padding: 45rpx 18rpx;
			background: linear-gradient(133deg, #F8FAFF 0%, #EEF3FF 100%);
			border-radius: 22rpx;
			&::after {
				content: '';
				position: absolute;
				right: 79rpx;
				top: -50rpx;
				width: 0;
				height: 0;
				// border: 20px solid;
				border-top: 26rpx solid transparent;
				border-bottom: 26rpx solid #F0F5FF;
				border-left: 40rpx solid transparent;
				border-right: 40rpx solid transparent;
				// border-color: transparent transparent #fff transparent;
			}
			.item {
				@include center(100%);
				flex-direction: column;
				color: #2A2A2A;
				.name {
					font-size: 30rpx;
					font-weight: bold;
					margin: 14rpx 0 7rpx;
				}
				.sub-name {
					font-size: 24rpx;
				}
			}
		}
		
	}
	
	.recharge-card {
		margin-top: 34rpx;
		border-radius: 20rpx;
		overflow: hidden;
		.title-box {
			padding: 0 26rpx;
			color: #fff;
			@include between(100%, 100rpx);
			background: linear-gradient(304deg, #5881F0 0%, #A9C0FD 100%);
			.title {
				font-weight: bold;
				font-size: 34rpx;
			}
			.tip {
				font-size: 24rpx;
			}
		}
		.recharge-list {
			background-color: #fff;
			padding: 30rpx 24rpx 12rpx;
			.item {
				margin-bottom: 18rpx;
				padding: 40rpx 0;
				@include between(205rpx, 242rpx);
				flex-direction: column;
				color: #222222;
				border: 1rpx solid #D6D6D6;
				border-radius: 10rpx;
				.name {
					font-size: 28rpx;
				}
				.price-box {
					font-size: 40rpx;
					.yuan {
						font-size: 28rpx;
					}
				}
				.send-price {
					font-size: 24rpx;
				}
			}
			.active {
				color: #516DDB;
				border: 1rpx solid #516DDB;
				background: #E8EBF6;
			}
		}
	}
	.agreement-box {
		@include center();
		margin-top: 80rpx;
	
		.context {
			font-size: 26rpx;
			color: #333333;
			margin-left: 10rpx;
	
			.color {
				color: #8B601E;
			}
		}
	}
	.recharge-btn {
		margin-top: 50rpx;
		margin-bottom: 60rpx;
		position: relative;
		.btn {
			position: absolute;
			left: 0;
			top: 0;
			@include between(100%, 100%);
			z-index: 9;
			color: #fff;
			padding: 0 44rpx;
			.left {
				.one {
					font-size: 30rpx;
					margin-right: 10rpx;
				}
				.two {
					font-size: 40rpx;
					margin-right: 16rpx;
				}
				.three {
					font-size: 30rpx;
				}
			}
			.right {
				font-size: 34rpx;
			}
		}
	}
</style>